<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:360px;
				height:400px;
				border:1px solid red;
				margin:0 auto;
			}
			#box .top{
				height:60px;
				background: yellow;
			}
			#box .top .bgred{
				background: red;
			}
			#box .top .bgblue{
				background: blue;
			}
			#box .top .bggreen{
				background: green;
			}
			#box .top div{
				width:120px;
				height:60px;
				background: black;
				color:white;
				font:bold 32px/60px "微软雅黑";
				text-align: center;
				float:left;
			}
			#box .top div.active{
				background: white;
				color:black;
			}
			#box .content{
				height:340px;
				position:relative;
			}
			#box .content div{
				position:absolute;
				top:0;
				left:0;
				height:340px;
				width:360px;
				background: chartreuse;
				text-align: center;
				line-height: 340px;
				font-size:148px;
				color:white;
				display: none;	
			}
			#box .content .red{
				background: red;
			}
			#box .content .blue{
				background: blue;
			}
			#box .content .green{
				background: green;
			}
			#box .content .active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="top">
				<div class="active" class="bgred" bg="red">红色</div>
				<div class="bgblue" bg="blue">蓝色</div>
				<div class="bggreen" bg="green">绿色</div>
			</div>
		
			<div class="content">
				<div class="red active">红色</div>
				<div class="blue">蓝色</div>
				<div class="green">绿色	</div>
			</div>
		</div>
		
		<script>
			window.onload = function(){

				var oBox = document.getElementById('box');
				var topBox = oBox.getElementsByClassName('top')[0];
				var btns = topBox.getElementsByTagName('div');
				var oContent = oBox.getElementsByClassName('content')[0];
				var oShows = oContent.getElementsByTagName('div');

				
				for(var i=0;i<btns.length;i++){

					btns[i].index = i;
					btns[i].onclick = function(){
						for(var j=0;j<btns.length;j++){
//							首先获取标签中自定义的背景bg里面的值.这个值记录了他原来的背景色
							var bg = btns[j].getAttribute('bg');
//							将他原来的背景色写入行内样式,使他的背景改变为原来的颜色
							btns[j].style.backgroundColor = bg;
//							将文字的颜色都变为白色
							btns[j].style.color = 'white';
						}
//						将当前点击的按钮背景变为白色,文字变为黑色
						this.style.backgroundColor = 'white';
						this.style.color = 'black';
						
						for(var k=0;k<oShows.length;k++){
							oShows[k].style.display = 'none';
						}
						oShows[this.index].style.display = 'block';
						
					}
				}
				

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			}
		</script>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
